<template>
  <div class="leftNavBar">
    <div class="logoCnt pt-32 mb-50">
      高校实验室安全监管系统
      <!-- <img
        style="width: 200px; height: 30px"
        src="../assets/images/login-logo.png"
        alt=""
      /> -->
    </div>
    <div class="avatarinfo flex mb-20">
      <div class="flex">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="avatarBtn" :style="{ lineHeight: '50px' }">
            <img
              v-if="useInfo.headImgUrl"
              class="avatarPhoto"
              :src="useInfo.headImgUrl"
              alt
            />
            <img
              v-else
              class="avatarPhoto"
              src="https://img1.baidu.com/it/u=1541636380,2661844494&fm=26&fmt=auto&gp=0.jpg"
              alt
            />
            <i class="el-icon-caret-bottom" />
          </span>
          <el-dropdown-menu slot="dropdown" class="userInfo">
            <el-dropdown-item divided command="loginOut">
              <p style="text-align: center">退出登陆</p>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="ml-10">
          <div class="fs-16 mb-4">{{ useInfo.nickName }}</div>
          <div class="cr-main">{{ getUserType(useInfo.userType) }}</div>
        </div>
      </div>
      <div :class="['btn', activeAdmin ? 'activeAdmin' : '']" @click="goAdmin">
        后台管理
      </div>
    </div>
    <el-menu
      :default-active="tabItem"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @select="handleOpen"
      :default-openeds="openArr"
      text-color="#AEB3BF"
      active-text-color="#00BFB1"
      :unique-opened="true"
    >
      <template v-for="item in getList">
        <template v-if="item.children">
          <el-submenu :index="item.Id" :key="item.Id">
            <template slot="title">
              <img
                class="icon"
                :src="
                  require(`@/assets/images/tabs/${
                    tabItem == item.Id ? item.icon1 : item.icon2
                  }.svg`)
                "
                alt=""
              />
              <span>{{ item.head }}</span>
            </template>
            <el-menu-item
              :index="item2.id"
              v-for="item2 in item.list"
              :key="item2.id"
              @click="linkTo(item2.router, item.Id)"
              >{{ item2.name }}</el-menu-item
            >
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item
            :index="item.Id"
            :key="item.Id"
            @click="linkTo(item.router, item.Id)"
          >
            <img
              class="icon"
              :src="
                require(`../assets/images/tabs/${
                  tabItem == item.Id ? item.icon1 : item.icon2
                }.svg`)
              "
              alt=""
            />
            <span slot="title">{{ item.head }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { tabList1, tabList2 } from "@/jsonData/tabsList";
import { outLogin } from "@/http/api.js";
export default {
  name: "leftNavBar",
  props: [],
  data() {
    return {
      isCollapse: false,
      openArr: [],
      activeAdmin: false,
      useInfo: {},
    };
  },
  mounted() {
    this.useInfo = JSON.parse(localStorage.getItem("userInfo"));
    if (this.$route.name === "admin") {
      this.activeAdmin = true;
      this.tabItemHandle(null);
    }
  },
  methods: {
    ...mapMutations("home", ["tabItemHandle"]),
    linkTo(name, key) {
      this.tabItemHandle(key);
      this.activeAdmin = false;
      if (name !== this.$route.name) {
        this.$router.push({ name: name });
      }
    },
    handleCommand(command) {
      // command 设定为 function name
      this[command]();
    },
    async loginOut() {
      let flag = confirm("你确定要退出登录吗?");
      if (flag) {
        await outLogin();
        localStorage.clear();
        this.$router.push("/login");
      }
    },
    // 用户类型，1学生，2老师，3系统管理员
    getUserType(type) {
      switch (type) {
        case 1:
          return "学生";
        case 2:
          return "老师";
        case 3:
          return "系统管理员";
      }
    },
    goAdmin() {
      this.activeAdmin = true;
      this.tabItemHandle(null);
      if ("admin" !== this.$route.name) {
        this.$router.push({ name: "admin" });
      }
    },
    handleOpen(key, keyPath) {
      this.tabItemHandle(key);
      this.openArr.splice(0, 1, keyPath[0]);
    },
  },
  computed: {
    getList() {
      return tabList1;
    },
    ...mapState({
      tabItem: (state) => state.home.tabItem,
    }),
  },
};
</script>

<style scoped lang="scss">
.leftNavBar {
  background: #fff;
  position: fixed;
  top: 0;
  width: 260px;
  height: 100%;
  z-index: 9;
  box-shadow: 4px 0px 16px 0px rgba(8, 46, 68, 0.1);
  // border-right: 1px solid rgba($color: #00bfb1, $alpha: 0.5);
  .el-menu-vertical-demo {
    width: 100%;
    height: 100%;
    .icon {
      width: 20px;
      height: 18px;
      margin-right: 20px;
    }
  }
  .avatarBtn {
    color: #fff;
    height: 50px;
    /* line-height: 66px; */
    cursor: pointer;
  }

  .avatarBtn .avatarPhoto {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
  .logoCnt {
    width: 100%;
    height: 21px;
    font-size: 18px;
    font-family: PangMenZhengDao;
    letter-spacing: 2px;
    font-weight: 600;
    color: #00bfb1;
    // height: 50px;
    // line-height: 50px;
    text-align: center;
    // img {
    //   vertical-align: middle;
    // }
  }
  .avatarinfo {
    margin-top: 40px;
    padding: 0px 20px;
    box-sizing: border-box;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    // height: 50px;
  }
  .navIcon {
    width: 18px;
    position: relative;
    left: -8px;
  }
  .navBarUl {
    height: 100%;
    border-right: none;
  }
  .leftNavShowBtn {
    position: absolute;
    right: -15px;
    top: 66px;
    background: #f2f2f2;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 50%;
    .circle {
      position: absolute;
      left: 13%;
      top: 13%;
      width: 80%;
      height: 80%;
      line-height: 24px;
      background-color: #4eb2ff;
      border-radius: 50%;
      text-align: center;
      color: #fff;
      cursor: pointer;
      transform: rotate(0deg);
      transition: 0.2s ease;
    }
    .circle:hover {
      background-color: #2080db;
    }
    .circle.hiddenLeftNav {
      transform: rotate(180deg);
      left: 25px;
      top: -5px;
    }
  }
}
/* @keyframes scale {
  from { transform: scale(1.1); }
  50% { transform: scale(0.9); }
  to { transform: scale(1.15); }
} */

/*
  level1 代表一级普通菜单
  level1Sub 代表一级下拉菜单
  level2 代表二级普通菜单
  level2Sub 代表二级普通菜单
  level3 代表三级普通菜单
*/
.level1 {
  border-left: 2px solid transparent;
}
// .el-menu-item,
// .el-submenu{
//   width: 220px;
//   height: 48px;
//   line-height: 48px;
//   margin-left: 20px;
//   border-radius: 8px;
// }
.level1.is-active {
  // border-color: #04a9f3;
}
.level1,
.level2,
.level3 {
  border-left: 2px solid transparent;
  transition: all 0.2s ease-in;
}
.level1.is-active,
.level2.is-active,
.level3.is-active {
  // border-color: #ECEFF6;
  background-color: #eceff6;
  // background-image: linear-gradient(-90deg, #ffffff 0%, #ECEFF6 100%);
}
.level2Sub .el-submenu__title,
.level2 {
  // padding-left: 50px !important;
}
.navIcon.asset {
  width: 16px;
  height: 16px;
}
.navIcon.book {
  height: 18px;
}
.reportForm {
  width: 16px !important;
}
.pointSetting {
  width: 20px !important;
}
.btn {
  cursor: pointer;
  margin-left: 24px;
  width: 80px;
  height: 28px;
  border: 1px solid #00bfb1;
  border-radius: 2px;
  text-align: center;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  background: #00bfb1;
  color: #fff;
  line-height: 28px;
}
.activeAdmin {
  background: #fff;
  color: #00bfb1;
}
</style>



